| 纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式 | 您所在的位置：网站首页 › input type=radio › 纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式 |
纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式
|
纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式2015-07-20 12:22:18 By: shinyuu
shinyuu
CSS3教程
0
22587
21
估计做过Web的都发现了一个问题、radio和checkbox由于不同的浏览器显示的样式不一致、因此我们需要自定义radio(单选框)和checkbox（多选框）的样式、基本原理就是给radio和checkbox的自定义样式设置成图片背景、然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别、从而达到自定义radio和checkbox的假象、最终生成的效果图、如下所示
HTML代码如下 Checkbox1 Checkbox2 Radio1 Radio2 Radio3
JavaScript代码 $(function(){ $(´body´).addClass(´has-js´); $(´.label_check,.label_radio´).click(function(){ setupLabel(); }); setupLabel(); }); function setupLabel(){ if($(´.label_check input´).length) { $(´.label_check´).each(function(){ $(this).removeClass(´c_on´); }); $(´.label_check input:checked´).each(function(){ $(this).parent(´label´).addClass(´c_on´); }); }; if($(´.label_radio input´).length) { $(´.label_radio´).each(function(){ $(this).removeClass(´r_on´); }); $(´.label_radio input:checked´).each(function(){ $(this).parent(´label´).addClass(´r_on´); }); }; }
CSS代码 * { margin: 0; padding: 0; } body { font: 14px/18px ´HelveticaNeue-Light´, ´Helvetica Neue´ , Arial, Helvetica, sans-serif; color: #fff; background: #333; } a:hover, a:active { outline: none; } /*form style*/ form { width: 300px; padding: 18px 20px 0; margin:20px auto; background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(#049cdb, #0064cd); background-image: -ms-linear-gradient(#049cdb, #0064cd); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); background-image: -webkit-linear-gradient(#049cdb, #0064cd); background-image: -o-linear-gradient(#049cdb, #0064cd); background-image: linear-gradient(#049cdb, #0064cd); -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); box-shadow: 0 5px 12px rgba(0,0,0,.4); } fieldset { border: 0; padding-bottom: 9px; } label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } .checkboxes { border-bottom: 1px solid #0064cd; } .radios { padding-top: 18px; border-top: 1px solid #049CDB; } .label_check input, .label_radio input { margin-right: 5px; } .has-js .label_check, .has-js .label_radio { padding-left: 34px; } .has-js .label_radio, .has-js .label_check{ background: url(http://www.w3cplus.com/sites/default/ files/checkbox-radio-bg.png) no-repeat; } .has-js .label_radio { background-position: 0 0; } .has-js .label_check { background-position: 0 -100px } .has-js label.c_on { background-position: 0 -150px; } .has-js label.r_on { background-position: 0 -50px; } .has-js .label_check input, .has-js .label_radio input { position: absolute; left: -9999px; }
上面的代码是控制css样式的js代码、采用的是jQuery、所以一定要先引入jQuery文件、以上就是使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式的全部代码、代码可以直接拷贝运行、赶紧去试一下吧 若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力 想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs） 或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博） 如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教 为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板） 感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛 |
【本文地址】
公司简介
联系我们